<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>		
		<div id="app">
			<br/>
			<p>我们测试下动态组件绑定的情况，在默认情况下切换出去的组件会被摧毁。</p>
			<component :is="current"></component>
			<button @click="changeCurrent('index')">首页</button>
			<button @click="changeCurrent('lists')">列表</button>
			<button @click="changeCurrent('detail')">详情</button>
			<button @click="changeCurrent('other')">其他</button>
		</div>
	</body>
<script type="text/javascript">
var app = new Vue({
	el: '#app',
	data: {
		current: 'vue-index'
	},
	components: {
		'vue-index': {
			data: function(){
				return {
					message: "这是首页"
				};
			},
			template: '<div style="height: 50px; background-color: #00FFFF;">{{message}}</div>',
			created: function(){
				var that = this;
				window.setTimeout(function(){
					that.message = "1.这是首页";
				}, 2000);
			}
		},
		'vue-lists': {
			data: function(){
				return {
					message: "这是列表页"
				};
			},
			template: '<div style="height: 50px; background-color: #FF7F50;">{{message}}</div>',
			created: function(){
				var that = this;
				window.setTimeout(function(){
					that.message = "2.这是列表页";
				}, 2000);
			}
		},
		'vue-detail': {
			data: function(){
				return {
					message: "这是详情页"
				};
			},
			template: '<div style="height: 50px; background-color: burlywood;">{{message}}</div>',
			created: function(){
				var that = this;
				window.setTimeout(function(){
					that.message = "3.这是详情页";
				}, 2000);
			}
		}
	},
	methods: {
		changeCurrent: function(name){
			if(name == 'other'){
				//直接定义一个组件对象来指向
				this.current = {
					data: function(){
						return {
							message: "这是其他页"
						};
					},
					template: '<div style="height: 50px; background-color: #123456">{{message}}</div>',
					created: function(){
						var that = this;
						window.setTimeout(function(){
							that.message = "4.这是其他页";
						}, 2000);
					}
				};
				
			}else{
				this.current = 'vue-' + name;
			}
		}
	}
});
</script>
</html>
